<template>
    <div :id="barId" class="bar-chart"></div>
</template>
<script>
export default {
  name: 'barchart',
  data () {
    return {
      chartTxtColor: window.chartTxtColor,
      barChartColors: window.barChartColors,
      resizeTimer: null,
      fontSize: (window.fontSize || 100),
      myChart: null
    }
  },
  props: {
    chartData: {
      type: Object,
      default: () => []
    }
  },
  computed: {
    barId () {
      return 'barechart' + parseInt(Math.random() * 1000000)
    }
  },
  watch: {
    chartData: {
      handler () {
        this.drawChart()
      },
      deep: true
    }
  },
  mounted () {
    let that = this
    this.$nextTick(() => {
      that.drawChart()
    })
  },
  activated () { // 只有设置了keep-alive才生效
    this.$nextTick(() => {
      console.log('activated...')
      if (document.getElementById(this.barId) && document.getElementById(this.barId).clientHeight === 0) {
        this.myChart.resize()
      }
    })
  },
  methods: {
    drawChart () {
      let option = {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        title: {
            text: '渐变堆叠面积图'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'Line 1',
                type: 'line',
                stack: '总量',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(128, 255, 165)'
                    }, {
                        offset: 1,
                        color: 'rgba(1, 191, 236)'
                    }])
                },
                emphasis: {
                    focus: 'series'
                },
                data: [140, 232, 101, 264, 90, 340, 250]
            },
            {
                name: 'Line 2',
                type: 'line',
                stack: '总量',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0, 221, 255)'
                    }, {
                        offset: 1,
                        color: 'rgba(77, 119, 255)'
                    }])
                },
                emphasis: {
                    focus: 'series'
                },
                data: [120, 282, 111, 234, 220, 340, 310]
            },
            {
                name: 'Line 3',
                type: 'line',
                stack: '总量',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(55, 162, 255)'
                    }, {
                        offset: 1,
                        color: 'rgba(116, 21, 219)'
                    }])
                },
                emphasis: {
                    focus: 'series'
                },
                data: [320, 132, 201, 334, 190, 130, 220]
            },
            {
                name: 'Line 4',
                type: 'line',
                stack: '总量',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(255, 0, 135)'
                    }, {
                        offset: 1,
                        color: 'rgba(135, 0, 157)'
                    }])
                },
                emphasis: {
                    focus: 'series'
                },
                data: [220, 402, 231, 134, 190, 230, 120]
            },
            {
                name: 'Line 5',
                type: 'line',
                stack: '总量',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                label: {
                    show: true,
                    position: 'top'
                },
                areaStyle: {
                    opacity: 0.8,
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(255, 191, 0)'
                    }, {
                        offset: 1,
                        color: 'rgba(224, 62, 76)'
                    }])
                },
                emphasis: {
                    focus: 'series'
                },
                data: [220, 302, 181, 234, 210, 290, 150]
            }
        ]
    }
      this.myChart = this.$echarts.init(document.getElementById(this.barId), null, {renderer: 'svg'})
      this.myChart.setOption(option)

      window.addEventListener('resize', this.listenResize)
    },
    listenResize () {
      let resizeTimer = setTimeout(() => {
        this.fontSize = window.fontSize || 100
        this.myChart.resize()
        clearTimeout(resizeTimer)
      }, 300)
    }
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.listenResize)
    this.myChart.clear()
  },
  deactivated () {
    window.removeEventListener('resize', this.listenResize)
    this.myChart.clear()
  }
}
</script>
<style lang="less" scoped>
.bar-chart{
    width: 100%;
    height: 100%;
}
</style>
